<template>
    <el-drawer
        v-model="isShow"
        size="50%"
        :destroy-on-close="true"
        @close="closeHandle"
    >
        <template #header="{ close, titleId, titleClass }">
            <h4 :id="titleId" :class="titleClass">{{ title }}</h4>
        </template>
        <el-form :model="form" ref="formRef" label-width="auto" :rules="rules">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="姓名" required prop="name">
                        <el-input v-model="form.name" placeholder="请输入姓名"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="别名">
                        <el-input v-model="form.othername" placeholder="请输入别名"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="性别">
                        <el-select v-model="form.sex">
                            <el-option
                                v-for="item in nj_sex"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="年龄">
                        <el-input-number v-model="form.age" :min="0" :max="999" :controls="false" />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="民族">
                        <el-input v-model="form.nation" placeholder="请输入民族"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="身份证号">
                        <el-input v-model="form.code" placeholder="请输入身份证号"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="行业">
                        <el-input v-model="form.industry" placeholder="请输入行业"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="职务">
                        <el-input v-model="form.post" placeholder="请输入职务"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="工作单位">
                        <el-input v-model="form.work" placeholder="请输入工作单位"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="单位电话">
                        <el-input v-model="form.workcall" placeholder="请输入单位电话"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="常驻地址">
                        <el-input v-model="form.liveaddress" placeholder="请输入常驻地址"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机">
                        <el-input v-model="form.mobile" placeholder="请输入手机"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="家庭电话">
                        <el-input v-model="form.homeacall" placeholder="请输入家庭电话"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="家庭地址">
                        <el-input v-model="form.homeaddress" placeholder="请输入家庭地址"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="是否党员">
                        <el-select v-model="form.isCommunist">
                            <el-option
                                v-for="item in sys_null_yes_no"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否人大代表">
                        <el-select v-model="form.isNpcmember">
                            <el-option
                                v-for="item in sys_null_yes_no"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="是否政协委员">
                        <el-select v-model="form.isCppccmembers">
                            <el-option
                                v-for="item in sys_null_yes_no"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否加入其他组织">
                        <el-select v-model="form.isOther">
                            <el-option
                                v-for="item in sys_null_yes_no"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="类型">
                        <el-select v-model="form.type">
                            <el-option
                                v-for="item in nj_sheanren_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态">
                        <el-select v-model="form.state">
                            <el-option
                                v-for="item in nj_sheanren_status"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>

        <template #footer>
            <el-button type="primary" @click="submitHandle">提交</el-button>
            <el-button @click="isShow = false">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>

import {getCurrentInstance} from "vue";
import {createRoom, editRoom} from "@/api/Room/room.js";
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept";
import { getUserProfile } from "@/api/system/user";
import {createByinquest,editByinquest} from "@/api/byinquest/byinquest";
import { number } from "echarts";
import {validateIdCard} from "@/validate/validateIdCard.js";

const {proxy} = getCurrentInstance()
const {sys_normal_disable, nj_sex,sys_null_yes_no,nj_sheanren_type,nj_sheanren_status} = proxy.useDict('sys_normal_disable', 'nj_sex', 'sys_null_yes_no', 'nj_sheanren_type', 'nj_sheanren_status')
// 是否显示抽屉
const isShow = ref(false)
// 抽屉标题
const title = ref('')
// 表单
const rules = {
    name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
    // code: [
    //     {required: true, message: '请填写身份证号', trigger: 'blur'},
    //     {validator: validateIdCard, trigger: 'blur'}
    // ],
}
const form = ref({
    caseId:'',
    name:'',othername:'',sex:'1',age:null,nation:'',code:'',
    industry:'',post:'',work:'',workcall:'',
    liveaddress:'',mobile:'',homeacall:'',homeaddress:'',
    isCommunist:'2',isNpcmember:'2',isCppccmembers:'2',isOther:'2',type:'1',state:'1'
})
// 通知事件
const emit = defineEmits(['getByinquestList'])

const changeShowStatus = () => {
    isShow.value = !isShow.value
}

const showAddCaseByinquest = (ByinquestForm) => {
    title.value = '添加涉案人';
    console.log(form.value)
    form.value.name = ""
    Object.assign(form.value, {
        caseId: ByinquestForm.caseId,
        unitId: ByinquestForm.unitId,
        depId: ByinquestForm.depid,
        adduserId: ByinquestForm.adduserId
    });
    changeShowStatus()
}

const showEditCaseByinquest = (ByinquestForm,data) => {
    title.value = '修改涉案人信息'
    changeShowStatus()
    form.value = {
        byinquestId:data.byinquestId,
        name: data.name,
        othername: data.othername,
        sex: data.sex === '男' ? '1' :data.sex === '女' ? '2' :'3',
        age: data.age ? Number(data.age) : null,
        nation: data.nation,
        code: data.code,
        industry: data.industry,
        post: data.post,
        work: data.work,
        workcall: data.workcall,
        liveaddress: data.liveaddress,
        mobile: data.mobile,
        homeacall: data.homeacall,
        homeaddress: data.homeaddress,
        isCommunist: String(data.isCommunist),
        isNpcmember: String(data.isNpcmember),
        isCppccmembers: String(data.isCppccmembers),
        isOther: String(data.isOther),
        type:String(data.type),
        state:String(data.state)
    }
    Object.assign(form.value, {
        caseId: ByinquestForm.caseId,
        unitId: ByinquestForm.unitId,
        depId: ByinquestForm.depid,
        adduserId: ByinquestForm.adduserId
    });
}
defineExpose({showAddCaseByinquest, showEditCaseByinquest})

const defaultQuery = {
    name:'',
    othername:'',
    sex:'1',
    age:null,
    nation:'',
    code:'',
    industry:'',
    post:'',
    work:'',
    workcall:'',
    liveaddress:'',
    mobile:'',
    homeacall:'',
    homeaddress:'',
    isCommunist:'2',
    isNpcmember:'2',
    isCppccmembers:'2',
    isOther:'2',
    type:'1',
    state:'1'
}
const deptqueryParams = ref({
    deptName: undefined,
    status: undefined
})

onMounted(() => {

})

const submitHandle = async () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            if(form.value.age == ''){
                form.value.age = null
            }
            if (form.value['byinquestId']) {
                 editByinquest(form.value).then(res => {
                    form.value = defaultQuery
                    changeShowStatus()
                    emit('getByinquestList', '来了老弟')
                })
            } else {
                 createByinquest(form.value).then(res => {
                    form.value = defaultQuery
                    changeShowStatus()
                    emit('getByinquestList', '来了老弟')
                    
                })
            }
        }
});
    
}

// 关闭后的回调事件
const closeHandle = () => {
    form.value = defaultQuery
    console.log(123123)
}
</script>

<style lang="scss" scoped>
h4{margin: 10px 0;}
.el-input-number{width:100%}
:deep() .el-input-number .el-input__inner{text-align:left}
</style>